<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div>
        <div style="display: flex;justify-content: flex-end;width: 100%; align-items: baseline;">
          <div style="width: 40%;display: flex;justify-content: space-around;">
             <el-input prefix-icon="el-icon-search"  clearable style="width:200px" placeholder="停车场名称" v-model="query.name"></el-input>
             <el-input prefix-icon="el-icon-search"  clearable style="width:200px" placeholder="车场编号" v-model="query.parkKey"></el-input>
          </div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['sysPost.add']">新增</el-button>
        </div>
      </div>

    </el-header>
    <div class="pd10">
      <el-table
        :data="parkingData"
        border
        stripe
        v-loadMore="[payLoads,'paking-list']"
        :height="curHeight"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="停车场名称"
          width="180"
          align="center"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          label="停场类型"
          width="180"
          align="center"
          prop="platformName"
        >
        </el-table-column>
        <el-table-column
          label="车场编号"
          align="center"
          prop="parkKey"
        >
        </el-table-column>
        <el-table-column
          label="免费时长（分钟）"
          align="center"
          prop="freeMinutes"
        >
        </el-table-column>
        <el-table-column
          label="车场二维码"
          align="center">
            <template slot-scope="scope">
              <el-button size="mini"  plain @click="parkingcodes(scope.row)">显示二维码</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="车场进口二维码"
          align="center">
            <template slot-scope="scope">
              <el-button size="mini"  plain @click="parkingcodesinto(scope.row)">显示出口二维码</el-button>
          </template>
        </el-table-column>
        <el-table-column label="详情" align="center"  >
          <template slot-scope="scope">
              <el-button  size="mini" @click="parkingdetails(scope.row)">车场记录</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px" >
          <template slot-scope="scope">
            <div>
              <el-tooltip  class="item" effect="dark" content="出口操作" placement="top-start">
                <a  @click="GateClick(scope.row)" style="margin-right:15px">
                  <i style="color: #409EFF" class="el-icon-document"></i>
                </a>
              </el-tooltip>
              <el-tooltip  class="item" effect="dark" content="编辑" placement="top-start">
                <a  @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip  class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px"  @click="deleteSysPost(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer class="el-footerBox">
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadparking"></pagination>
    </el-footer>
    <el-dialog
  title="出口详情"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
    <el-table
        :data="exitList"
        border
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          align="center"
        >
        </el-table-column>
         <el-table-column
          label="出口编号(车道控制机号)"
          width="250"
          align="center"
          prop="ctrlNo"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
           <el-button type="primary" size="mini" @click="Manualopening(scope.row)">手动开闸</el-button>
           <el-button type="info" size="mini" @click="Manualclonseing(scope.row)">手动关闸</el-button>
           <el-button type="success" size="mini" @click="Generatecode(scope.row)">生成出口二维码</el-button>
          </template>
        </el-table-column>
      </el-table>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  <el-dialog
  title="二维码"
  :visible.sync="dialogVisiblecode"
  width="30%"
  :before-close="handleClosecode">
  <div style="display: flex;
    justify-content: center;
    align-items: center;">
   <img :src="bindingImage" alt="">
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblecode = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisiblecode = false">确 定</el-button>
  </span>
</el-dialog>
  <el-dialog
  title="场内二维码"
  :visible.sync="dialogVisiblecreadcode"
  width="30%">
  <div style="display: flex;
    justify-content: center;
    align-items: center;">
   <img :src="creadImage" alt="">
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblecreadcode = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisiblecreadcode = false">确 定</el-button>
  </span>
</el-dialog>
  </el-container>
</template>

<script>
  import loadMore from '@/utils/loadMore.js'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {list,del,find,gateControl,createImage} from '@/api/parking'
  import utils from '../../utils/utils.js'
  import {EventBus} from '@/api/eventBus'
  import Pagination from '@/components/Pagination';
  import { mapGetters } from 'vuex'
  export default {
    name:'parking-list',
    directives: { permission,loadMore },
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        dialogVisiblecreadcode:false,
        bindingImage:'',//出口二维码
        creadImage:'',  //场内二维码
        dialogVisible:false,
        payLoads:'',
        parkingData:[],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        queryType: true,
        query: {
          parkKey: '',
          name: ''
        },
        keyword:{
          name: '',
          parkKey: ''
        },
        sysPostOpenForm: {
          id: '',
          status: '',
        },
        curHeight:null,
        exitList:[],
        dialogVisiblecode:false
      }
    },
    components: { Pagination },
    computed: {
    ...mapGetters([
      'mchId'
    ])
  },
    created() {
      var _this = this
      this.loadparking()
      EventBus.$on('parking-add', res => { // 监听新增完毕
        // 更新列表数组
        _this.parkingData.splice(0, 0,res)
      });
      EventBus.$on('parking-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (var i=0;i<_this.parkingData.length;i++){
           if (_this.parkingData[i].id == res.id){
             _this.parkingData[i] = res
           }
        }
      })

      console.log(this.mchId);
    },
    mounted(){
      this.comeIn()
      this.beforeMount()
    },
    methods: {
           parkingcodesinto(item){
        console.log(item);
        this.dialogVisiblecreadcode=true
          let code = `https://small.rzico.com/into/${item.parkingId}?ctrlNo=${item.ctrlNo}`
          this.creadImage = process.env.VUE_APP_BASE_API + '/zxing/createImage?data=' + encodeURIComponent(code)
          console.log(this.creadImage);
      },
      parkingcodes(item){
        console.log(item);
        this.dialogVisiblecreadcode=true
          let code = `https://small.rzico.com/q/${item.id}`
          this.creadImage = process.env.VUE_APP_BASE_API + '/zxing/createImage?data=' + encodeURIComponent(code)
          console.log(this.creadImage);
      },
      handleClosecode(){this.dialogVisiblecode=false},
        Generatecode(item){
          this.dialogVisiblecode=true
          let code = `https://small.rzico.com/q/${item.parkingId}?ctrlNo=${item.ctrlNo}`
          this.bindingImage = process.env.VUE_APP_BASE_API + '/zxing/createImage?data=' + encodeURIComponent(code)
          console.log(this.bindingImage);

      },
      Manualopening(item){
        console.log(item);
        let params = new URLSearchParams();
        params.append('ctrlNo', item.ctrlNo);
        params.append('parkingId', item.parkingId);
        params.append('controlType', 1);
        gateControl(params).then(res=>{
        this.$message({
         message: res,
         offset: 120,
         center: true
         });

        })
      },
      Manualclonseing(item){
       console.log(item);
        let params = new URLSearchParams();
        params.append('ctrlNo', item.ctrlNo);
        params.append('parkingId', item.parkingId);
        params.append('controlType', 0);
        gateControl(params).then(res=>{
        this.$message({
         message: res,
         offset: 120,
         center: true
         });

        })
      },
      handleClose(){
        this.dialogVisible=false
      },
      GateClick(data){
       this.dialogVisible=true
       console.log(data);
       find(data.id).then(res=>{
         console.log();
         this.exitList=res.data.Parking.exitList
       })

      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn(){
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      },
      editClick(row) {
        this.$router.push({
          path: '/parking/edit', query: {id: row.id}
        })
      },
      parkingdetails(data){
          console.log(data);
          this.$router.push({
          path: '/parking/details', query: {id: data.id}
        })
      },
      openSysPost(row) {
        var _this = this
        row.loading = true
        console.log(row);
        this.sysPostOpenForm.id = row.id;
        if (row.status == 0) {
          this.sysPostOpenForm.status = 1
        } else if (row.status == 1) {
          this.sysPostOpenForm.status = 0
        }
        update(_this.sysPostOpenForm).then(response => {
          console.log(response)
          _this.sysPostData.forEach(function (item) {
             if (item.id == row.id){
               item.status = response.data.status
             }
          })
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          row.loading = false
        }).catch(error => {
          row.loading = false
          console.log('error!!')
        });
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      addClick() {
        this.$router.push({
          path: '/parking/add'
        })
      },
      deleteSysPost(data) {
        console.log(data)
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            console.log(response)
            _this.parkingData.forEach(function (item,index) {
              if (item.id == data.id){
                _this.parkingData.splice(index,1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {
        });
      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1
        this.loadparking()
      },
      loadparking() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('parkKey', _this.keyword.parkKey);
        params.append('name', _this.keyword.name);
        list(params).then(response => {
          console.log(response)
          _this.parkingData = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
    }
  }
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
